<template>
    <div class="container">
        <div class="banner-edit">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link to="/operate/bannerSet">运营管理 / </router-link>
                banner配置
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="detail-display">
                <div class="flex-box-align head-sec">
                    <div class="flex">发布产品</div>
                    <div></div>
                    <!--<el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="handleClickCommit">提交</el-button>-->
                </div>
                <div class="" style="padding-top: 30px;">
                    <div class="flex-box-align whiteSpace mb30">
                        <span>banner标题：</span><el-input v-model="params.title" placeholder="请输入内容" style="width: 200px"></el-input>
                    </div>
                    <div class="flex-box-align whiteSpace mb30">
                        <span>banner图：</span>
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                               >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <el-button v-else type="primary" style="background-color: #ED7018;border-color: #ED7018;">选择图片</el-button>

                        </el-upload>
                    </div>
                    <div class="flex-box-align whiteSpace mb30">
                        <span>url：</span><el-input v-model="params.url" placeholder="请输入内容" style="width: 200px"></el-input>
                    </div>
                    <div style="text-align: right">
                        <el-button type="primary" style="background-color: #ED7018;border-color: #ED7018;" @click="handleClickCommit">提交</el-button>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import {parseUrlParams} from "../../util";
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
    import VDistpicker from 'v-distpicker';
    import $ from 'jquery';
    export default {
        data() {
            return {
                params: {
                    id: null,
                    h5Id: null,
                    imageIds: "",
                    title: "",
                    url: ""
                },
                uploadUrl: "",
                imageUrl: "",
                num: 0,
                messageList: []
            }
        },
        components:{
            'bg-editor':()=>import('../common/bg-editor.vue')
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            this.id = this.$router.currentRoute.query.id;
            this.getbannerList()
            this.uploadUrl = CONSTANT.URL.SYS.ADMINUPLOAD + "?sessionId="+common.getCookie("sessionId");
        },
        methods:{
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getbannerList(params, callback) {
                let url = CONSTANT.URL.BANNER.BANNERLIST;
                common.requestAjax(url, {}, {pageIndex:1,pageSize:100}, (res)=>{
                    let arr = res.data.bussData;
                    arr.map((item)=>{
                        if(item.id == this.id){
                            this.params = {
                                id: item.id,
                                h5Id: item.h5Id,
                                imageIds: item.imageIds,
                                title: item.title,
                                url: item.url,
                            }
                            this.imageUrl =item.imageList[0].fileUrl
                        }
                    })
                }); 
            },
            getDictionary(params, callback) {
                let url = CONSTANT.URL.SYS.LOADDICTIONARY;
                common.requestAjax(url, {codeType: params}, {}, callback);
            },
            getUserType(params, callback) {
                let url = CONSTANT.URL.COMPANY.USERTYPE;
                common.requestAjax(url, {UserType: params}, {}, callback);
            },
            handleAvatarSuccess(res, file) {
                this.params.imageIds = res.data.bussData.fileId
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            handleClickCommit() {
                let url = CONSTANT.URL.BANNER.SAVEBANNER;
                common.requestAjax(url, JSON.stringify(this.params), {}, (data) => {
                    if(data.status == 200) {
                        this.$message({
                            message: data.msg,
                            type: 'success'
                        });
//                        this.$router.back();
                    }
                })
            },
            handleClickAdd() {
                this.licenseData.contactDatas.push({
                    age: "",
                    trueName: "",
                    position: "",
                    introduction: "",
                })
            },
            handleChange(val) {
                val.map( (item, index)=> {
                    if (index == 0) {
                        this.params.firstIndustry = item
                    }
                    if (index == 1) {
                        this.params.secondIndustry = item
                    }
                    if (index == 2) {
                        this.params.thirdIndustry = item
                    }
                })
            },
            editorInfo(val){
                this.params.memo = val;
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>

<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .container {
        .mb30 {
            margin-bottom: 30px;
        }
        .whiteSpace {
            white-space: nowrap;
        }
        .banner-edit {
            header {
                margin: 19px 0;
                font-size: 14px;
                color: #333;
                a {
                    color: #999;
                }
            }
            .focus-pointer {
                font-size: 14px;
                height: 70px;
                line-height: 70px;
                background-color: #fff;
                padding-left: 18px;
                white-space: nowrap;
            }
            .detail-display {
                background-color: #fff;
                padding: 23px;
                .head-sec {
                    padding-bottom: 20px;
                    border-bottom: 1px solid #e1e1e1;
                }
                .el-radio__input.is-checked .el-radio__inner {
                    border-color: #ED7018;
                    background: #ED7018;
                }
                .el-radio__input.is-checked+.el-radio__label {
                    color: #333;
                }
            }
            .top-manager {
                margin-bottom: 20px;
                span {
                    width: 80px;
                    display: inline-block;
                }
            }
        }
        .avatar-uploader .el-upload {
            /*border: 1px dashed #d9d9d9;*/
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            /*height: 178px;*/
            display: block;
        }
    }
</style>
